<template>
  <div class="box">
    <div class="itemTitle">
      <div>机器视觉（看）</div>
      <div>自然语言处理（听、说）</div>
      <div>机器学习与数据分析（学习）</div>
    </div>
    <div class="targetBox">
      <VueDraggable v-model="list1" animation="150" ghostClass="ghost" group="d1">
        <div v-for="item in list1" :key="item" class="tag">
          <img :src="item.url" alt="" />
        </div>
      </VueDraggable>
      <VueDraggable v-model="list2" animation="150" ghostClass="ghost" group="d1">
        <div v-for="item in list2" :key="item" class="tag">
          <img :src="item.url" alt="" />
        </div>
      </VueDraggable>
      <VueDraggable v-model="list3" animation="150" ghostClass="ghost" group="d1">
        <div v-for="item in list3" :key="item" class="tag">
          <img :src="item.url" alt="" />
        </div>
      </VueDraggable>
    </div>
    <div class="thing">
      <VueDraggable v-model="list0" animation="150" ghostClass="ghost" group="d1">
        <div v-for="item in list0" :key="item" class="tag">
          <div><img :src="item.url" alt="" /></div>
          
          <div style="margin: 5px ;">{{ item.name }}</div>
        </div>
      </VueDraggable>
    </div>
    <div class="itemTitle">
      <div>个性化推荐</div>
      <div>生成式人工智能</div>
      <div>智能机器人</div>
    </div>
    <div class="targetBox">
      <VueDraggable v-model="list4" animation="150" ghostClass="ghost" group="d1">
        <div v-for="item in list4" :key="item" class="tag">
          <img :src="item.url" alt="" />
        </div>
      </VueDraggable>
      <VueDraggable v-model="list5" animation="150" ghostClass="ghost" group="d1">
        <div v-for="item in list5" :key="item" class="tag">
          <img :src="item.url" alt="" />
        </div>
      </VueDraggable>
      <VueDraggable v-model="list6" animation="150" ghostClass="ghost" group="d1">
        <div v-for="item in list6" :key="item" class="tag">
          <img :src="item.url" alt="" />
        </div>
      </VueDraggable>
    </div>
    <div style="width: 100%; display: flex; justify-content: center">
      <el-button type="info" plain style="width: 100px; height: 50px; font-size: 30px; margin: 20px 0"
        @click="submit">提交</el-button>
    </div>
    <audio id="voice">
      <source src="../voice/选择完毕.mp3" type="audio/mpeg" />
    </audio>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { VueDraggable } from "vue-draggable-plus";
import { ElMessage } from "element-plus";
import "element-plus/es/components/message/style/css";

const list0 = ref([
  {
    id: "1-1",
    url: require("@/img/game/1-1.png"),
    name: "出入口车辆",
  },
  {
    id: "1-2",
    url: require("@/img/game/1-2.png"),
    name: "人脸识别",
  },
  {
    id: "1-3",
    url: require("@/img/game/1-3.png"),
    name: "行人识别",
  },
  // {
  //   id: "1-4",
  //   url: require("@/img/game/1-4.png"),
  //   name: "图库",
  // },
  // {
  //   id: "1-5",
  //   url: require("@/img/game/1-5.png"),
  //   name: "人脸扫描",
  // },
  {
    id: "2-1",
    url: require("@/img/game/2-1.png"),
    name: "小艺智能助手",
  },
  // {
  //   id: "2-2",
  //   url: require("@/img/game/2-2.png"),
  //   name: "豆包语音助手",
  // },
  {
    id: "2-3",
    url: require("@/img/game/2-3.png"),
    name: "siri语音助手",
  },
  {
    id: "2-4",
    url: require("@/img/game/2-4.png"),
    name: "小爱同学语音助手",
  },
  // {
  //   id: "2-5",
  //   url: require("@/img/game/2-5.png"),
  //   name: "小冰语音助手",
  // },
  // {
  //   id: "2-6",
  //   url: require("@/img/game/2-6.png"),
  //   name: "百度翻译",
  // },
  // {
  //   id: "2-7",
  //   url: require("@/img/game/2-7.png"),
  //   name: "有道翻译",
  // },
  // {
  //   id: "2-8",
  //   url: require("@/img/game/2-8.png"),
  //   name: "讯飞AI翻译笔",
  // },
  {
    id: "3-1",
    url: require("@/img/game/3-1.png"),
    name: "炒股辅助软件",
  },
  {
    id: "3-2",
    url: require("@/img/game/3-2.png"),
    name: "AI股票预测",
  },
  // {
  //   id: "3-3",
  //   url: require("@/img/game/3-3.png"),
  //   name: "征信报告",
  // },
  {
    id: "3-4",
    url: require("@/img/game/3-4.png"),
    name: "诊断疾病",
  },
  {
    id: "4-1",
    url: require("@/img/game/4-1.png"),
    name: "淘宝网",
  },
  {
    id: "4-2",
    url: require("@/img/game/4-2.png"),
    name: "今日头条",
  },
  {
    id: "5-1",
    url: require("@/img/game/5-1.png"),
    name: "AI绘图",
  },
  {
    id: "5-2",
    url: require("@/img/game/5-2.png"),
    name: "文生图",
  },
  {
    id: "5-3",
    url: require("@/img/game/5-3.png"),
    name: "文生文",
  },
  {
    id: "5-4",
    url: require("@/img/game/5-4.png"),
    name: "文生·3D动画",
  },
  {
    id: "5-5",
    url: require("@/img/game/5-5.png"),
    name: "文生·3D视频",
  },
  {
    id: "6-1",
    url: require("@/img/game/6-1.png"),
    name: "无人驾驶",
  },
  {
    id: "6-2",
    url: require("@/img/game/6-2.png"),
    name: "扫地机器人",
  },
]);
const list1 = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const list4 = ref([]);
const list5 = ref([]);
const list6 = ref([]);
const right = ref({
  1: true,
  2: true,
  3: true,
  4: true,
  5: true,
  6: true,
});

const allRight = ref(true);

const submit = () => {
  //变量初始化
  for (var i = 1; i <= 6; i++) {
    right.value[i] = true;
  }
  allRight.value = true;

  //判断个数
  if (list1.value.length != 3) right.value[1] = false;
  if (list2.value.length != 3) right.value[2] = false;
  if (list3.value.length != 3) right.value[3] = false;
  if (list4.value.length != 2) right.value[4] = false;
  if (list5.value.length != 5) right.value[5] = false;
  if (list6.value.length != 2) right.value[6] = false;

  //判断正确
  list1.value.forEach((i) => {
    //遍历数组的id，要是id开头不为1，则为false
    const s = i.id.split("-");
    if (s[0] != 1) {
      right.value[1] = false;
    }
  });
  list2.value.forEach((i) => {
    const s = i.id.split("-");
    if (s[0] != 2) {
      right.value[2] = false;
    }
  });
  list3.value.forEach((i) => {
    const s = i.id.split("-");
    if (s[0] != 3) {
      right.value[3] = false;
    }
  });
  list4.value.forEach((i) => {
    const s = i.id.split("-");
    if (s[0] != 4) {
      right.value[4] = false;
    }
  });
  list5.value.forEach((i) => {
    const s = i.id.split("-");
    if (s[0] != 5) {
      right.value[5] = false;
    }
  });
  list6.value.forEach((i) => {
    const s = i.id.split("-");
    if (s[0] != 6) {
      right.value[6] = false;
    }
  });

  //判断是否全部正确
  for (var j = 1; j <= 6; j++) {
    if (!right.value[j]) {
      allRight.value = false;
    }
  }

  //全部正确显示文字
  if (allRight.value) {
    //播放音效
    var v = document.getElementById("voice");
    v.play();
    ElMessage({
      message: "恭喜你全部选择正确！",
      type: "success",
    });
  } else {
    ElMessage({
      message: "分类错误！",
      type: "error",
    });
  }

  //修改弹出框大小和图标的大小
  var el = document.querySelector(".el-message");
  if (el) el.style.cssText = " width:550px; font-size:60px ";
  //修改文字的css
  var elcontent = document.querySelector(".el-message__content");
  if (elcontent) elcontent.style.cssText = "  font-size:40px ";
};

onMounted(() => {
  //随机排序数组
  list0.value.sort(() => Math.random() - 0.5);
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  user-select: none;
  color: aliceblue;

  .itemTitle {
    display: flex;
    justify-content: center;

    div {
      flex-basis: 23%;
      text-align: center;
      font-size: 30px;
      font-weight: 600;
      height: 50px;
      margin: 0 70px;
      line-height: 50px;
      background-color: #504656;
      border-radius: 8px;
      box-shadow: 0 0 10px #000;
    }
  }

  .thing {
    width: 100%;
    display: flex;
    justify-content: center;

    //VueDraggable
    >div {
      padding: 10px 0;
      width: 100%;
      background-color: #656565;
      height: 420px;
      margin: 10px;
      border: 1px solid #000;
      box-shadow: 0 0 10px #000;
      display: flex;
      flex-wrap: wrap;
      align-content: start;


    }
  }

  .targetBox {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0;

    //VueDraggable
    >div {
      flex-basis: 30%;
      height: 350px;
      border: 5px solid #000000;
      margin: 10px;
      box-shadow: 0 0 6px #000;
      display: flex;
      flex-wrap: wrap;
      align-content: start;

      >div{
        margin-left: 40px;


      }
    }
  }

  .tag {
    margin: 5px 0;
    text-align: center;
    line-height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-basis: 11%;
    font-size: 30px;

    img {
      
      width: 160px;
      height: 160px;
    }
  }
}
</style>